<!-- 番茄钟页面 -->
<template>
    <div class='tomatoIndex'>
        <div class="tomatoHead">
            <svg class="svg-icon" aria-hidden="true">
                <use :xlink:href="'#icon' + icon"></use>
            </svg>
            <div class="th_txt">空城机の番茄钟</div>
        </div>
        <todayPlan />
    </div>
</template>

<script>
import { notifyMe } from '../../assets/js/messageInform';
import todayPlan from './todayPlan.vue'

export default {
    name: 'tomatoIndex',
    props: {},
    data () {
        return {
            icon: '-Tomato-',
            notifyIsok: false,
        };
    },
    mounted() {
        
    },
    components: {
        todayPlan
    },
    computed: {},
    methods: {
        // 获取当前是否运行通知
        async notifyOk() {
            let res = await notifyMe();
            this.notifyIsok = res;
        },
        // window通知
        winInform() {
            let options = {
                body: '这是来自window的消息通知',
                icon: require('../../assets/img/icon1.png')
            }
            
            let n = new Notification('消息发送1',options);
            console.log(n)
        },
    }
}

</script>
<style  lang='less' scoped>
@import url(../../assets/css/common.less);
    .tomatoIndex {
        .wandh(100%, 100%);
        display: flex;
        flex-direction: column;
        .tomatoHead {
            .wandh(100%, 50px);
            display: flex;
            align-items: center;
            
            box-sizing: border-box;
            background-color: #26A8E6;
            .th_txt {
                color: rgb(241, 209, 201);
                font-weight: bold;
                font-size: 25px;
                text-shadow: rgb(207, 92, 15) 5px 5px 5px;
            }
            // 图标
            .svg-icon {
                .wandh(30px, 25px);
            }
        }
    }
</style>